<template>
  <div v-if="recordLst && recordLst.length > 0" class="mt16">
    <div v-for="item in recordLst" :key="item.id" class="mt16 border br4 p12">
      <div>{{ formatDate(item.beginTime) }} - {{ formatDate(item.endTime) }}</div>
      <div class="flex-center-between tc-l3 mt12">
        <div style="width: 30%">
          参保方案：<span class="tc-l1">{{ item.schemeName }}</span>
        </div>
        <div style="width: 30%">
          保险公司：<span class="tc-l1">{{ item.insCompanyName }}</span>
        </div>
        <div style="width: 30%">
          保费：<span class="tc-l1">{{ item.monthAmount }}/月</span>
        </div>
      </div>
      <div class="flex-center-between tc-l3 mt12">
        <div style="width: 30%">
          缴费类型：<span class="tc-l1">{{ item.paymentType || "" }}</span>
        </div>
        <div style="width: 60%">
          方案详情：<span class="tc-l1">{{ item.schemeDetail || "" }}</span>
        </div>
      </div>
      <div class="flex-center-between tc-l3 mt12">
        <div style="width: 90%">
          赔付内容：<span class="tc-l1">{{ item.payoutContent || "" }}</span>
        </div>
      </div>
    </div>
  </div>
  <a-empty v-else class="mt16" />
</template>
<script>
export default {
  name: "",
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      recordLst: []
    };
  },
  computed: {
    empId() {
      return this.$route.query.id;
    }
  },
  watch: {
    empId: {
      handler() {
        this.loadData();
      },
      immediate: true
    }
  },
  created() {},
  mounted() {},
  methods: {
    formatDate(val) {
      if (val) {
        return this.$dayjs(val).format("YYYY-MM-DD");
      }
      return "--";
    },
    loadData() {
      this.$request({
        url: `/hr/api/v1/hrInsurance/selectEmpInsuranceList/${this.empId}`
      })
        .then((res) => {
          this.recordLst = res.data;
        })
        .catch((err) => {
          console.log("selectEmpInsuranceList", err);
        });
    }
  }
};
</script>
<style lang="scss"></style>
